<template>
	<div class="layout">
		<Layout>
			<Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed">
				<Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
					<MenuItem name="1-1">
					<Icon type="ios-navigate"></Icon>
					<span>学生管理</span>
					</MenuItem>
					<MenuItem name="1-2">
					<Icon type="ios-search"></Icon>
					<span>年级管理</span>
					</MenuItem>
					<MenuItem name="1-3">
					<Icon type="ios-settings"></Icon>
					<span>成绩管理</span>
					</MenuItem>
				</Menu>
				<div slot="trigger"></div>
			</Sider>
			<Layout>
				<Header class="layout-header-bar">
					<div>
						<Row :gutter="16">
					        <Col span="6">
					            <div style="margin: 15px;">
					            	<Input search enter-button placeholder="Enter something..." />
					            </div>
					        </Col>
					        <Col span="6">
					            <div>
					            	<i-button type="success" @click="showStudent_model">新增学生</i-button>
					            </div>
					        </Col>
					        <Col span="6">
					            <div>col-6</div>
					        </Col>
					        <Col span="6">
					            <div>col-6</div>
					        </Col>
					    </Row>
						
					</div>
				</Header>
				<Content :style="{margin: '20px', background: '#fff', minHeight: '80vh'}" class="api">
					<Table :loading="loading" border :columns="stuColumns" :data="stuList"></Table>
				</Content>
				<Page  :total='dataCount'  :page-size='pageSize'  @on-change='changePage' @on-page-size-change="_nowPageSize" show-sizer show-total />
				<!--<Page total="7"  show-elevator show-total/>-->
			</Layout>
		</Layout>
		<Modal
	        v-model="editStudent_model"
	        :title='modeltitle'
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <p>
	        	学生编号：
	        	<Input v-model="studentNo" placeholder="Enter something..." clearable style="width: 350px" />
	        </p>
	         <p>
	        	学生名称：
	        	<Input v-model="studentName" placeholder="Enter something..." clearable style="width: 350px" />
	        </p>
	         <p>
	        	学生性别：
	        	<!--<Input v-model="sex" placeholder="Enter something..." clearable style="width: 350px" />-->
	        	<RadioGroup v-model="sex">
			        <Radio label="男">
			            <Icon type="md-female"></Icon>
			            <span>男</span>
			        </Radio>
			        <Radio label="女">
			            <Icon type="md-male"></Icon>
			            <span>女</span>
			        </Radio>
			    </RadioGroup>
	        </p>
	         <p>
	        	学生年龄：
	        	<Input v-model="age" placeholder="Enter something..." clearable style="width: 350px" />
	        </p>
	         <p>
	        	所在年级：
	        	<Select v-model="grade_model" style="width:350px">
			        <Option v-for="item in gradeList" :value="item.value" :key="item.value">
			        	{{ item.label }}
			        </Option>
			    </Select>
	        </p>
	         <p>
	        	学生住址：
	        	<Input v-model="address" placeholder="Enter something..." clearable style="width: 350px" />
	        </p>
	    </Modal>
	</div>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				isCollapsed: false,
				editStudent_model: false,
				modeltitle:'学生信息添加',
				mflag:0,
				editUrl:'',
				editId:'',
				loading: false,
				
				dataCount:0,//总条数
				pageSize:5,//每页显示多少条
				pageCurrent: 1,//当前页
				
				stuColumns: [
					{	
						title:'序号',
						type:'index',
						key:'_id',
						width: 50
					},
                    {
                        title: '学生编号',
                        key: 'studentNo',
                        sortable: false
                    },
                    {
                        title: '学生姓名',
                        key: 'studentName'
                    },
                    {
                    	title:'性别',
                    	key:'sex'
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        sortable: true
                    },
                    {
                    	title:'所属年级',
                    	key:'gradeId',
                    	sortable: true,
                    	render:(h,params)=>{
                    			return h('span',params.row.gradeId.gradeName);
                    		}
                    },
                    {
                        title: '家庭住址',
                        key: 'address',
                        tooltip:true
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.updateStudent(params.row._id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.removeStudent(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                stuList: [{}],
                gradeList: [
                    {
                        value: '1',
                        label: 'S1'
                    },
                    {
                        value: '2',
                        label: 'S2'
                    },
                    {
                        value: '3',
                        label: 'Y3'
                    }
                ],
                grade_model:1,
				studentNo:'',
				studentName:'',
				sex:'',
				age:'',
				address:''
			}
		},
		methods: {
			/**
			 * 点击前进 或后退
			 */
			changePage(index){
				this.pageCurrent = index;
				this.queryStuList(index,this.pageSize);
			},
			/**
			 * 选中页面显示的条数
			 */
			_nowPageSize(index){
				this.pageSize = index;
				this.queryStuList(this.pageCurrent,index);
			},
			/**
			 * 初始化
			 */
			showStudent_model(){
				this.modeltitle = '学生信息添加';
				this.mflag = 0;
				this.editStudent_model = true;
				this.studentNo = '';
				this.studentName = '';
				this.sex = '';
				this.age = '';
				this.grade_model = '';
				this.address = '';
			},
			/**
			 * 添加 和 修改
			 */
            ok () {
            	this.editUrl = this.mflag == 0?'/save':'/update';
            	this.$axios.post(this.editUrl,
					{	
						id:this.editId,
						studentNo:this.studentNo,
						studentName:this.studentName,
						sex:this.sex,
						age:this.age,
						gradeId:this.grade_model,
						address:this.address
					})
				 .then((res)=>{
				 	this.$Message.info('操作成功，一条数据已添加！');
				 	this.queryStuList(this.pageCurrent,this.pageSize);
				 })
				 .catch((err)=>{
				 	console.log(err)
				 })
                //
            },
            cancel () {
                //this.$Message.info('Clicked cancel');
            },
            /**
             * 查询总页数
             */
            queryStuList(_pageno,_pagesize){
            	this.$axios.post('/student_list_new',{
            		pageno:_pageno,
            		pagesize:_pagesize
            	})
				   .then((res)=>{
				   	   this.dataCount = res.data.count
				   	   this.stuList=res.data.result
				   })
				   .catch((err)=>{
				   	 console.log(err)
				   })
            },
            /**
             * 读取
             */
            updateStudent (index) {
            	this.editStudent_model = true;
            	this.modeltitle = '编辑学生信息';
            	this.mflag = 1;
                this.$axios.get('/readOne',{
					params:{
						id:index
					}
				})
				   .then((res)=>{
				   		let student = res.data.result;
				   	    this.studentNo = student.studentNo;
						this.studentName = student.studentName;
						this.sex = student.sex;
						this.age = student.age;
						this.grade_model = student.gradeId;
						this.address = student.address;
						this.editId = index;
				   })
				   .catch((err)=>{
				   	 console.log(err)
				   })
            },
            /**
             * s删除
             */
            removeStudent (index) {
            	this.$axios.post('/delete',{
					id:index
				})
				.then((res)=>{
					if(res.data.status=='200'){
						this.$Message.info('操作成功，一条数据已删除！');
				 		this.queryStuList(this.pageCurrent,this.pageSize);
					}
				})
				.catch((err)=>{
					console.log(err)
				})
            }
        },
		computed: {
			menuitemClasses() {
				return [
					'menu-item',
					this.isCollapsed ? 'collapsed-menu' : ''
				]
			}
			
		},
		mounted(){
			this.queryStuList(this.pageCurrent,this.pageSize);
		}
	}
</script>

<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-header-bar {
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	}
	
	.menu-item span {
		display: inline-block;
		overflow: hidden;
		width: 69px;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
		transition: width .2s ease .2s;
	}
	
	.menu-item i {
		transform: translateX(0px);
		transition: font-size .2s ease, transform .2s ease;
		vertical-align: middle;
		font-size: 16px;
	}
	
	.collapsed-menu span {
		width: 0px;
		transition: width .2s ease;
	}
	
	.collapsed-menu i {
		transform: translateX(5px);
		transition: font-size .2s ease .2s, transform .2s ease .2s;
		vertical-align: middle;
		font-size: 22px;
	}
	
	.api table {
	    font-family: Consolas,Menlo,Courier,monospace;
	    font-size: 12px;
	    border-collapse: collapse;
	    border-spacing: 0;
	    empty-cells: show;
	    border: 1px solid #e9e9e9;
	    width: 100%;
	    margin-bottom: 24px;
	}
	
	.api table th {
	    border: 1px solid #e9e9e9;
	    padding: 8px 16px;
	    text-align: left;
	}
	.api table th {
	    background: #f7f7f7;
	    white-space: nowrap;
	    color: #5c6b77;
	    font-weight: 600;
	}
	.api table td, .api table th {
	    border: 1px solid #e9e9e9;
	    padding: 8px 16px;
	    text-align: left;
	}
	.ivu-modal-body p{
		margin: 10px 0;
	}
</style>